<template>
  <div class="app-container">
    <div class="app-title">
      查询条件
    </div>
    <div class="filter-container clearfix">
      <div class="searchItem">
        <label for="">关键字:</label>
        <el-input
          v-model="createByOrVersion"
          placeholder="发布人,版本号"
          class="search-item"
        />
      </div>
      <div class="searchItem">
        <label for="">平台:</label>
        <el-select v-model="platform" placeholder="全部">
          <el-option label="安卓" value="1" />
          <el-option label="IOS" value="2" />
        </el-select>
      </div>
      <div class="searchItem">
        <label for="">应用APP:</label>
        <el-select v-model="application" placeholder="全部">
          <el-option label="ebroker" value="00" />
          <el-option label="车E家" value="01" />
        </el-select>
      </div>

      <div class="searchItem">
        <label for="">上线时间:</label>
        <el-date-picker
          v-model="dateTime"
          :range-separator="null"
          start-placeholder="上线时间"
          value-format="yyyy-MM-dd"
          class="search-item date-range-item"
          type="daterange"
        />
      </div>
      <div class="searchItem">
        <el-button v-has-permission="['version:search']" class="searchItembtn" type="primary" @click="search">
          {{ $t("common.search") }}
        </el-button>
        <el-button class="searchItembtn" type="success" @click="reset">
          {{ $t("table.reset") }}
        </el-button>
        <el-button v-has-permission="['version:add']" class="searchItembtn el-icon-folder-add" type="success" @click="add">
          发布新版本
        </el-button>
      </div>

    </div>
    <div class="app-title">
      版本列表
    </div>

    <el-table
      ref="table"
      :key="tableKey"
      v-loading="loading"
      :data="list"
      border
      fit
      style="width: 100%"
    >
      <el-table-column
        label="序号"
        prop="username"
        :show-overflow-tooltip="true"
        align="center"
        type="index"
        min-width="120px"
      >
        <!-- <template slot-scope="scope">
          <span>{{ scope.row.username }}</span>
        </template> -->
      </el-table-column>
      <el-table-column
        label="上线时间"
        :show-overflow-tooltip="true"
        align="center"
        min-width="150px"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.onlineTime }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="版本号"
        :show-overflow-tooltip="true"
        align="center"
        min-width="150px"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.version }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="平台"
        :show-overflow-tooltip="true"
        align="center"
        min-width="150px"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.platform == 1 ? "安卓" : "ios" }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="发布人"
        :show-overflow-tooltip="true"
        align="center"
        min-width="150px"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.createBy }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="文件"
        :show-overflow-tooltip="true"
        align="center"
        min-width="150px"
      >
        <template slot-scope="scope">

          <a v-if="scope.row.platform == 1" style="color:#00f" :href="scope.row.fileUrl" target="_blank">下载</a>
          <a v-else style="color:#00f" :href="scope.row.fileUrl" target="_blank">{{ scope.row.fileUrl }}</a>
          <!-- <el-link style="color:#00f" :href="scope.row.fileUrl" target="_blank">下载</el-link> -->
          <!-- <span>{{ scope.row.fileUrl }}</span> -->
        </template>
      </el-table-column>
      <el-table-column
        label="上传时间"
        :show-overflow-tooltip="true"
        align="center"
        min-width="150px"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.updateTime===null? scope.row.createTime : scope.row.createTime }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="发布状态"
        :show-overflow-tooltip="true"
        align="center"
        min-width="150px"
      >
        <template slot-scope="scope">
          <!-- <span>{{ scope.row.status }}</span> -->
          <el-tag v-if="scope.row.status===0">未发布</el-tag>
          <el-tag v-else-if="scope.row.status===1" type="success">已发布</el-tag>
          <el-tag v-else-if="scope.row.status===-1" type="danger"> 撤销 </el-tag>
        </template>
      </el-table-column>
      <el-table-column
        :label="$t('table.operation')"
        align="center"
        min-width="150px"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="{ row }">
          <el-link v-if="row.status!=-1" v-has-permission="['version:update']" class="el-icon-edit" @click="editView(row)"> 编辑</el-link>
          <el-link v-if="row.status!=-1" v-has-permission="['version:delete']" class="el-icon-back" @click="deletes(row)"> 撤销</el-link>
          <span v-else>
            无法操作
          </span>

          <el-link
            v-has-no-permission="['version:update', 'version:delete']"
            class="no-perm"
          >
            {{ $t("tips.noPermission") }}
          </el-link>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="pagination.pageNum"
      :limit.sync="pagination.pageSize"
      @pagination="search"
    />
  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
export default {
  components: {
    Pagination
  },
  data() {
    return {
      total: 0,
      pagination: {
        pageSize: 10,
        pageNum: 1
      },
      dateTime: '',
      createByOrVersion: '',
      platform: '',
      application: '',
      loading: false,
      tableKey: 0,
      list: [{
        'createBy': '',
        'createTime': '',
        'fileUrl': '',
        'id': 0,
        'isForceUpdate': 0,
        'onlineTime': '',
        'platform': 0,
        'remark': '',
        'status': 0,
        'updateBy': '',
        'updateTime': '',
        'version': ''
      }]
    }
  },
  created() {
    this.search()
  },
  methods: {
    async search(e) {
      if (e && e.page) {
        this.pagination.pageNum = e.page
        this.pagination.pageSize = e.limit
      }
      this.loading = true
      const { createByOrVersion, dateTime, platform, application } = this
      let startTime = ''
      let endTime = ''
      if (dateTime) {
        startTime = dateTime[0] + ' 00:00'
        endTime = dateTime[1] + ' 23:59'
      }
      try {
        const result = await this.$post(
          '/web/appVersion/list',
          {
            queryRequest: {
              ...this.pagination
              // field: 'publishTime',
              // order: 'descending'
            },
            entity: { startTime, endTime, createByOrVersion, platform, application }
          },
          'json'
        )
        if (result.data.code === '0') {
          this.loading = false
          this.list = result.data.data.rows
          this.total = result.data.data.total
        }
      } catch (error) {
        this.loading = false
      }
    },
    reset() {
      this.createByOrVersion = ''
      this.dateTime = ''
      this.platform = ''
      this.application = ''
      this.search()
    },
    view(row) {
      console.log(row)
    },
    deletes({ id }) {
      this.$confirm('是否要确认撤销此版本的发布计划？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.$put(`/web/appVersion/updateStatus`, { entity: { id, status: -1 }}, 'json').then(
            (res) => {
              if (res.data.code === '0') {
                this.$message.success('撤销成功')
                this.search()
              } else {
                this.$message.error(res.data.message)
              }
            }
          )
        })
        .catch(() => {})
    },
    add() {
      this.$router.push({
        name: 'addVersion'
      })
    },
    editView(row) {
      this.$router.push({
        name: 'addVersion',
        query: {
          id: row.id
        }
      })
    }
  }
}
</script>

<style>
</style>
